<template>
	<gracePage headerBG="#FFFFFF" footerBg="#FFFFFF">
		<view slot="gHeader" class="grace-bg-white">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">商品详情</text></view>
				<!-- 消息按钮 -->
				<navigator url="/pages/message/msgPage/msgPage" hover-class="other-navigator-hover">
					<view class="grace-header-icons your-icon iconxiaoxi1"></view>
				</navigator>
			</view>
		</view>
		<view slot="gBody" style="padding-bottom:100rpx;">
			<graceFullLoading :graceFullLoading="graceFullLoading" logoUrl="/static/images/shopLoding.png" text="" size="100%"></graceFullLoading>
			<!-- 轮播图 -->
			<swiper
				class="grace-swiper"
				autoplay="true"
				indicator-dots
				indicator-color="rgba(255, 255, 255, 1)"
				indicator-active-color="#1CA376"
				style="height:750rpx"
				interval="5000"
			>
				<swiper-item v-for="(item, index) in shopInfo.img" :key="index"><image class="swiper-img" :src="item.img_url" mode="widthFix"></image></swiper-item>
			</swiper>
			<!-- 价格 -->
			<view class="grace-product-padding">
				<view class="grace-space-between grace-flex-vcenter">
					<!-- <text class="grace-product-price font-size-34">￥{{ selectShopInfo.price ? selectShopInfo.price : goods.shop_price }}</text> -->
					<text class="grace-product-price font-size-34">￥ 0</text>
					<view class="grace-nowrap font-size-26 grace-flex-center px-1 grace-tbr-large" style="background-color: #D1A970;" @click="openShare">
						<text class="font-size-28 pr-1 grace-white">分享给好友</text>
						<text class="grace-icons icon-share3 font-size-28 grace-white"></text>
					</view>
				</view>
				<text class="grace-product-title m-0 grace-bold">{{ goods.goods_name }}</text>
				<view class="grace-space-between grace-flex-vcenter">
					<text class="grace-text-small grace-gray">{{ goods.goods_brief }}</text>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- sku -->
			<view class="px-2" v-if="products.length != 0">
				<view class="grace-list-items">
					<view class="grace-list-body">
						<view class="grace-nowrap">
							<text class="grace-text grace-black6">已选：</text>
							<text class="grace-text">{{ selectShopInfo.selectText }}</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 评论区 -->
			<view class="grace-comments px-2">
				<view class="grace-list-items grace-border-b">
					<view class="grace-list-body">
						<view class="grace-nowrap">
							<text class="grace-text grace-black6" v-if="commentCount === '0'">暂无评价</text>
							<text class="grace-text grace-black6" v-else>评价({{ commentCount }})</text>
						</view>
					</view>
					<view class="grace-nowrap" @click="commentList(goods.goods_id)" v-if="commentCount != '0'">
						<text class="grace-text ">查看全部</text>
						<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
					</view>
				</view>
				<view class="grace-comments-items" v-for="(item, index) in commentContents" :key="index" v-if="index === 0">
					<image :src="item.user_picture" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">{{ item.user_name }}</text>
							<text class="grace-comments-info-text">{{ item.add_time }}</text>
						</view>
						<text class="grace-comments-content">{{ item.content }}</text>
						<view class="grace-comments-imgs" v-if="item.img">
							<view class="grace-comments-image" v-for="(img, indexImg) in item.img" :key="indexImg">
								<image :src="img.comment_img" mode="widthFix" class="grace-comments-img" @click.stop="showImgs(index, indexImg)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 产品详情图 -->
			<view class="px-2">
				<view class="grace-list-items grace-border-b">
					<view class="grace-list-body">
						<view class="grace-nowrap"><text class="grace-text">产品详情图</text></view>
					</view>
					<view class="grace-nowrap"></view>
				</view>
				<view class="pb-2 pt-4" >
					<!-- <rich-text type="text" :nodes="shopInfo.goods[0].goods_desc | goodsHtml"></rich-text> -->
					<image style="margin-top: -20rpx;" :src="item" mode="widthFix" v-for="(item, index) in productImg" :key="index"></image>
				</view>
			</view>
			<!-- 属性选择 -->
			<graceBottomDialog :show="attrIsShow" @closeDialog="closeAttr" borderRadius="25rpx">
				<form @submit="attrSubmit" style="box-sizing:border-box; " class="grace-form" slot="content">
					<view style="padding:10rpx 25rpx;">
						<!-- 头部商品信息 -->
						<view class="grace-product-attr-info">
							<image class="grace-product-attr-info-image pt-2" mode="widthFix" :src="goods.goods_thumb"></image>
							<view class="grace-product-attr-info-body">
								<view class="grace-space-between grace-flex-vbottom">
									<view class="">
										<text class="grace-product-price font-size-24">￥</text>
										<text class="grace-product-price font-size-34">0</text>
									</view>
									<view><text class="grace-icons icon-close" @tap="closeAttr" style="height: 20rpx;"></text></view>
								</view>
								<text class="grace-product-attr-info-stone">库存 : {{ selectShopInfo.inventory }}件</text>
								<text class="grace-product-attr-info-title">已选 : {{ selectShopInfo.selectText }}</text>
							</view>
						</view>
						<!-- 属性列表区 -->
						<scroll-view style="height:650rpx;" scroll-y>
							<view v-for="(item, index) in attrSkuArr" :key="index" class="grace-border-b py-2">
								<view class="grace-title">{{ item.name }}</view>
								<graceSelectTags selectedColor="#FF0036" :items="item.list" type="radio" @change="changeSelect($event, index)"></graceSelectTags>
							</view>
							<view class="grace-space-between grace-flex-vbottom pb-2">
								<view class="grace-margin-top"><text class="grace-title">购买数量</text></view>
								<view><graceNumberBox :value="buyNum" v-on:change="buyNumChange" :maxNum="selectShopInfo.inventory" :disabled="true"></graceNumberBox></view>
							</view>
						</scroll-view>
					</view>
					<view class="">
						<button
							type="warn"
							style="background-color:#1CA376;"
							:disabled="buyNum === 0 ? true : false"
							v-show="buyStatus === 1"
							class="my-footer-button"
							formType="submit"
						>
							立即购买
						</button>
						<button
							type="warn"
							style="background-color:#1CA376;"
							:disabled="buyNum === 0 ? true : false"
							v-show="buyStatus === 2"
							class="grace-button grace-border-radius"
							formType="submit"
						>
							{{ buyNum === 0 ? '库存不足' : '加入购物车' }}
						</button>
					</view>
				</form>
			</graceBottomDialog>
			<!--  利用底部对话框插槽 + 宫格布局实现分享布局 -->
			<graceBottomDialog :show="shareShow" v-on:closeDialog="closeDialog" borderRadius="25rpx">
				<view class="grace-margin-top " slot="content" style="height: 430rpx;">
					<view class="grace-flex-center grace-grids grace-margin-top five ">
						<block v-for="(list, indexs) in shareList" :key="indexs">
							<view class="grace-grids-items shareBox" @click="shareFn(list.name)">
								<image class="grace-grids-icon-img" :src="list.img" mode="widthFix"></image>
								<text class="grace-grids-text pt-2">{{ list.text }}</text>
							</view>
						</block>
					</view>
				</view>
			</graceBottomDialog>
		</view>
		<!-- 底部 -->
		<view class="grace-space-between grace-flex-vcenter grace-bg-white" slot="gFooter">
			<button
				type="warn"
				style="background-color:#1CA376;"
				:disabled="userInfo.is_free === '1' ? true : false"
				class="my-footer-button"
				@tap="buyNow()"
			>
				立即购买
			</button>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceNavBar from '@/graceUI/components/graceNavBar.vue';
import graceBottomDialog from '@/graceUI/components/graceBottomDialog.vue';
import graceNumberBox from '@/graceUI/components/graceNumberBox.vue';
import graceSelectTags from '@/components/myVue/graceSelectTags.vue';
import graceFullLoading from "@/components/myVue/graceFullLoading.vue";
import { mapState, mapMutations } from 'vuex';

var graceRichText = require('@/graceUI/jsTools/richText.js');
export default {
	data() {
		return {
			graceFullLoading:false,
			//详情数据
			shopId: 0,
			shopInfo: [],
			productImg: [],
			commentContents: [],
			commentCount: '',
			goods: [],
			attrSkuArr: [],
			selectedAll: [],
			selectedAllStr: '',
			products: [],
			buyStatus: 1,
			buyNum: 1,
			attrIsShow: false,
			// 存放已选中的商品信息
			selectShopInfo: {
				price: '',
				inventory: 1,
				selectText: '',
				product_id: '',
				goods_id: '',
				goods_number: ''
			},
			shareShow: false,
			shareList: [
				{
					img: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200727/6eb8ed792242f81a6c0629db7e4dfec1.png',
					text: '微信好友',
					name: 'WXSceneSession'
				},
				{
					img: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200727/3fc9e15a76104e4d50eeab1348c5d3e0.png',
					text: '朋友圈',
					name: 'WXSenceTimeline'
				}
			],
			// 收藏
			isCollection: false,
			// 立即支付的商品
			orderGoods:[],
			// 禁止增加数量
			inventoryStatus:false,
			preventStatus:true
		};
	},
	computed: {
		...mapState({
			loginStatus: state => state.user.loginStatus,
			userInfo: state => state.user.userInfo
		}),
		// 根据已选中的sku 显示相应的数据
		// 选中skus的索引
		checkedSkusIndex() {
			let index = this.products.findIndex(item => {
				return item.goods_attr === this.selectedAllStr;
			});
			return index;
		}
	},
	created() {
		this.__init();
	},
	onLoad(e) {
		console.log(e,e.inventory)
		if (e.id) {
			this.shopId = e.id;
		}
		if(e.inventory && e.inventory == '1'){
			console.log('你已经设置了不可点击')
			this.inventoryStatus = true;
		}
	},
	watch: {
		selectedAllStr: function(newVal) {
			this.buyNum = 1;
			var prduct = this.products[this.checkedSkusIndex];
			this.selectShopInfo.price = prduct.goods_price;
			this.selectShopInfo.inventory = parseInt(prduct.product_number);
			this.selectShopInfo.selectText = prduct.attr_value;
			this.selectShopInfo.product_id = prduct.product_id;
			this.selectShopInfo.goods_id = this.goods.goods_id;
			// 如果该商品没有库存就不能加入购物车
			if (parseInt(prduct.product_number) === 0) {
				this.buyNum = 0;
			}
			console.log('this.selectShopInfo', this.selectShopInfo);
		}
	},
	methods: {
		...mapMutations(['addCart']),
		async __init() {
			this.graceFullLoading = true;
			this.getInfo();
		},
		async getInfo() {
			let data = await this.$HTTP.post('/api/api.php', { act: 'get_goodsinfo', goods_id: this.shopId, user_id: this.loginStatus ? this.userInfo.user_id : 0 });
			console.log('data’', data);
			this.shopInfo = data;
			// 详情的编辑 只展示图片
			this.commentContents = data.comment.list;
			this.commentCount = data.comment.count;
			this.goods = data.goods[0];
			this.orderGoods = data.goods;
			this.products = data.products;

			// 判断是否收藏
			this.isCollection = data.goods[0].is_collect === 1 ? true : false;
			this.filterHTML(data.goods[0].goods_desc);
			this.setSkuFn(data.attr);
			this.graceFullLoading = false;
			
		},
		// 分享
		share: function() {
			uni.showToast({ title: '请自行完善分享代码', icon: 'none' });
		},
		// 评论图片展示
		showImgs: function(commentsIndex, imgIndex) {
			var arr = this.commentContents[commentsIndex].img,
				arr2 = [];
			for (var i = 0; i < arr.length; i++) {
				arr2.push(arr[i].comment_img);
			}
			uni.previewImage({
				urls: arr2,
				current: arr2[imgIndex]
			});
		},
		//打开属性视图
		buyNow() {
			// this.preventStatus 解决页面点击多次多次跳转的问题
			if(this.preventStatus){
				this.preventStatus = false;
				if (this.loginStatus) {
					// 设置添加购物车
					this.buyStatus = 1;
					// 该商品没有sku 就可直接购买
					if (this.products.length === 0) {
						//没有商品属性的商品提交
						// goods_number 代表购买数量
						this.orderGoods[0].goods_number = 1;
						// product_id == 0 代表没有商品规格
						this.orderGoods[0].product_id = 0;
						
						uni.navigateTo({
							url: "/pages/order/orderInfo2/orderInfo2?goods="+JSON.stringify(this.orderGoods),
							complete:()=>{
								this.preventStatus = true;
							}
						});
					
					} else {
						// 该商品有sku 的话就打开 属性视图
						this.attrIsShow = true;
						// 开启页面控制器
						this.preventStatus = true;
						console.log('这是有商品属性的', this.products);
					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login',
						complete:()=>{
							this.preventStatus = true;
						}
					});
				}
			}
		},
	
		// 关闭属性
		closeAttr: function() {
			this.attrIsShow = false;
		},
		changeSelect: function(e, index) {
			this.selectedAll[index] = e;
			// this.colorSelected = e;
			this.selectedAllStr = this.selectedAll.join('|');
		},

		// 购买数量变化
		buyNumChange: function(e) {
			var num = e[0],
				oldNum = parseInt(this.selectShopInfo.inventory);
			if (oldNum < num) return;
			else this.buyNum = num;
		},
		// 属性提交
		attrSubmit: function(e) {
			// 根据 this.buyStatus 判断 是加入购物车还是立即购买
			console.log('this.buyStatus’', this.buyStatus,this.preventStatus);
			if(this.preventStatus){
				this.preventStatus = false;
				if (this.buyStatus === 1) {
					let shopDes = this.selectShopInfo;
					// goods_number 代表购买数量
					this.orderGoods[0].goods_number = 1;
					// product_id == 0 代表没有商品规格
					this.orderGoods[0].product_id = shopDes.product_id;
					// 重设价格 
					this.orderGoods[0].goods_price = shopDes.price;
					// sku 属性
					this.orderGoods[0].selectText = shopDes.selectText;
					// 表示0 元购 商品
					this.orderGoods[0].complimentary = '0';
					uni.navigateTo({
						url: "/pages/order/orderInfo2/orderInfo2?goods="+JSON.stringify(this.orderGoods),
						complete:()=>{
							this.preventStatus = true;
						}
					});
					
				} else {
					
				}
			}
			//如果想关闭属性
			this.closeAttr();
		},
		
		filterHTML(HTML) {
			//匹配图片（g表示匹配所有结果i表示区分大小写）
			var imgReg = /<img.*?(?:>|\/>)/gi;
			//匹配src属性
			var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
			var arr = HTML.match(imgReg),
				arr2 = [];
			for (var i = 0; i < arr.length; i++) {
				var src = arr[i].match(srcReg);
				arr2.push(src[1]);
			}
			this.productImg = arr2;
		},
		// 回退事件
		navigateBackFn: function() {
			uni.navigateBack();
		},
		// 前往购物车
		gotoCat: function() {
			uni.switchTab({
				url: '/pages/cart/cart'
			});
		},
		// 重设 sku
		setSkuFn(obj) {
			var Obj = [],
				selectAll = [];
			for (let lists in obj) {
				var obj2 = {},
					arr = [];
				obj2.name = obj[lists].name;
				var oneObj = obj[lists].list[0];
				for (let i = 0; i < oneObj.length; i++) {
					if (i === 0) {
						selectAll.push(oneObj[i].goods_attr_id);
						arr.push({ name: oneObj[i].attr_value, value: oneObj[i].goods_attr_id, checked: true });
					} else {
						arr.push({ name: oneObj[i].attr_value, value: oneObj[i].goods_attr_id, checked: false });
					}
				}

				obj2.list = arr;
				Obj.push(obj2);
			}
			this.attrSkuArr = Obj;
			this.selectedAll = selectAll;
			this.selectedAllStr = selectAll.join('|');
		},
		// 分享
		openShare: function() {
			this.shareShow = true;
		},
		closeDialog: function() {
			this.shareShow = false;
		},
		// 分享到
		shareFn(type) {
			let pages = getCurrentPages(),
				_this = this;
			let route = pages[pages.length - 1].route;
			let ahref = this.$HTTP.common.baseUrl + '/' + route + '?id=' + this.shopId;
			console.log(ahref);
			uni.share({
				provider: 'weixin',
				scene: type,
				type: 0,
				href: ahref,
				title: '臻之筱商品分享',
				summary: this.goods.goods_name,
				imageUrl: this.shopInfo.img[0].thumb_url,
				success: function(res) {
					// console.log('success:' + JSON.stringify(res));
					uni.showToast({
						title: '已成功分享',
						icon: false,
						duration: 2000
					});
				},
				fail: function(err) {},
				complete: function() {
					// 关闭分享
					_this.shareShow = false;
				}
			});
		},
		// 查看全部评价
		commentList: function(id) {
			uni.navigateTo({
				url: '/pages/shop/shopInfoComment/shopInfoComment?id=' + id
			});
		}
	},
	filters: {
		//过滤器做到共用
	},
	components: { gracePage, graceNavBar, graceBottomDialog, graceSelectTags, graceNumberBox ,graceFullLoading}
};
</script>
<style>
/* 修改样式 */
.swiper-img {
	width: 750rpx;
	height: 750rpx;
}
.grace-grids-items {
	padding: 6rpx 0;
	width: 90rpx;
}
.grace-grids-icon {
	height: 50rpx;
	line-height: 50rpx;
	font-size: 40rpx;
	color: #6b7375;
}
.grace-grids-text {
	line-height: 28rpx;
	font-size: 20rpx;
	margin-top: 2px;
	color: #a6a6a6;
}
.grace-footer-active {
	color: #ff0036;
}
.my-icon-br {
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
}
.my-icon-bl {
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
}
.icon-close {
	font-size: 30rpx;
	line-height: 80rpx;
	color: #888888;
}
.my-footer-button {
	width: 750rpx;
	height: 100rpx;
	font-size: 30rpx;
	text-align: center;
	line-height: 100rpx;
}
/* 原本样式 */
.grace-common-line {
	height: 16rpx;
}
.grace-product-padding {
	padding: 20rpx 25rpx;
}
.grace-product-title {
	line-height: 44rpx;
	font-size: 28rpx;
}
.grace-product-share {
	width: 80rpx;
	height: 80rpx;
	text-align: center;
	font-size: 40rpx;
	color: #f0282a;
	line-height: 80rpx;
	flex-shrink: 0;
	margin-left: 12px;
}
.grace-product-share:after {
	width: 0;
	height: 0;
}
.grace-product-price {
	color: #f0282a;
	line-height: 60rpx;
	/* font-size: 30rpx; */
	font-weight: bold;
}
.grace-product-info-img {
	width: 100%;
}
.grace-product-attr-info {
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #f1f1f3;
	padding-bottom: 26rpx;
}
.grace-product-attr-info-image {
	width: 120rpx;
	height: auto;
	margin-right: 10px;
	flex-shrink: 0;
}
.grace-product-attr-info-body {
	width: 700rpx;
}
.grace-product-attr-info-title {
	width: 100%;
	font-size: 28rpx;
	color: #333333;
	display: block;
}
.grace-product-attr-info-stone {
	width: 100%;
	font-size: 24rpx;
	margin-top: 8rpx;
	color: #666666;
	display: block;
}

.grace-grids-icon {
	height: 50rpx;
	line-height: 50rpx;
	font-size: 40rpx;
	color: #6b7375;
}
.grace-grids-text {
	line-height: 28rpx;
	font-size: 20rpx;
	margin-top: 2px;
	color: #6b7375;
}
.grace-footer-active {
	color: #ff0036;
}
.shareBox {
	width: 30%;
}
</style>
